import React, { useEffect, useState } from 'react';

import { Status } from '../api/organization/organization';
import OrganisationRequestsManagement from '../components/dashboard/organization-management';
import MainLayout from '../components/HOCs/main-layout';
import {
    DEFAULT_FILTER_VALUE,
    IFilter,
    SearchSortPagingHeader
} from '../components/shared/tables/search-sort-paging-header';

export const outlinedStyle = {
    background: '#13112A',
    border: 'solid 1px transparent',
    backgroundImage:
        'linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(90deg, #0CD3E3 -1.18%, #FF007A 97.17%)',
    backgroundOrigin: 'border-box',
    backgroundClip: 'content-box, border-box',
    boxShadow: '2px 1000px 1px #13112A inset'
};

export default function IndexPage() {
    const [key, setKey] = useState(0);
    const [filter, setFilter] = useState<IFilter>(DEFAULT_FILTER_VALUE);

    const onApplyFilter = (filter: IFilter) => {
        setFilter({ ...filter });
    };

    useEffect(() => {
        setKey(key + 1);
    }, [filter]);

    return (
        <MainLayout>
            <SearchSortPagingHeader onApplyFilter={onApplyFilter} />
            {key !== 0 && (
                <OrganisationRequestsManagement key={key} filter={filter} status={Status.Pending} />
            )}
        </MainLayout>
    );
}
